<template>
  <el-form
    ref="addSalesPlan"
    :rules="rules"
    :model="addSalesPlan"
    label-position="top"
    class="addTictStyle sale-main"
    size="small"
  >
    <el-row :gutter="24">
      <el-col :span="16" :offset="5">
        <el-form-item label="票务名称 :" prop="tictName">
          <el-select
            v-model="addSalesPlan.tictName"
            filterable
            placeholder="请选择票务信息"
            @change="getTictValue"
            style="width:100%"
          >
            <el-option
              v-for="item in tictData"
              :key="item.uuid"
              :label="item.name"
              :value="item.name"
            >
              {{ item.name }}
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="16" :offset="5">
        <el-form-item label="播出日期" prop="allShowTime">
        <el-date-picker
          v-model="addSalesPlan.allShowTime"
          filterable
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="timestamp"
          size="small"
          :picker-options="pickerOptions"
        />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="16" :offset="5">
      <el-row :span="24" v-for="(item,index) in addSalesPlan.broadcastList"  :key="index" @deleteIndex="del">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>播出场次{{index+1}}</span>
            <el-button style="font-size:14px;color: #3370FF;float: right; padding: 3px 0;border:none;"    @click="del(index)" >删除</el-button>
          </div>
          <el-form-item label="播出场次 :">
            <el-input v-model="item.name" placeholder="场次名称(选填)"  />
          </el-form-item>
          <el-form-item label="开始时间 :" prop="boradsDate">
            <el-date-picker
              v-model="item.startTime"
              type="datetime"
              value-format="timestamp"
              placeholder="选择日期时间"
              :picker-options="pickerStartOptions"
              @change="recordStartTimeValue(item.startTime)"
              style="width:100%">
            </el-date-picker>
          </el-form-item>
        <el-form-item label="结束时间 :">
        <el-date-picker

          v-model="item.endTime"
          type="datetime"
          value-format="timestamp"
          placeholder="选择日期时间"
          :picker-options="pickerEndOptions"
          style="width:100%">
        </el-date-picker>
        </el-form-item>
        </el-card>
      </el-row>
      <el-button type="primary"  @click="addItem"  style="background-color:#F8F9FA;color:#171717;width:100%;border-color:#E1E3E6;margin-top:12px;" >新增场次</el-button>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="16" :offset="5" style="padding-top:8px;">
        <el-form-item label="团队购票" prop="teamCumstoer">
        <el-row :gutter="20"> 
          <el-col :span="4">
            <el-select
              v-model="addSalesPlan.teamCumstoer"
              filterable
              placeholder="请选择团队购票"
              @change="openDiscount"
              style="width:100%"
            >
              <el-option
                v-for="item in teamCumstoerOption"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              >
                {{ item.name }}
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="20">
            <el-input v-if="define" type="number" v-model="addSalesPlan.teamDefine" placeholder="请输入限定人数" />
          </el-col>
        </el-row>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="24">
      <el-col :span="16" :offset="5">
    <el-form-item label="售票价格 :">
      <el-row v-for="(stallItems,index) in addSalesPlan.stallItems"  :key="'str'+index" @deleteIndex="delStallItems">
      <el-card class="box-card" >
        <div slot="header" class="clearfix" style="line-height:22px;">
          <span>票档{{index+1}}</span>
          <el-button  style="font-size:14px;color: #3370FF;float: right; padding: 3px 0;border:none;"  @click="delStallItems(index)" >删除</el-button>
        </div>
        <el-form-item label="票档名称 :">
          <el-input v-model="stallItems.name" placeholder="请输入票档名称" />
        </el-form-item>
        <el-form-item label="票档颜色值 :">
          <el-input v-model="stallItems.takeColor" readonly="readonly" placeholder="请选择颜色" ></el-input>
          <el-color-picker v-model="stallItems.takeColor"  style="position: absolute;left: 97%;"></el-color-picker>
        </el-form-item>
        <el-form-item label="票档价格 :">
          <el-input v-model="stallItems.stallPrice" placeholder="请输入票档价格" ></el-input>
        </el-form-item>
      </el-card>
    </el-row>
    </el-form-item>

    <el-button type="primary" @click="addStallItems"  style="background-color:#F8F9FA;color:#171717;width:100%;border-color:#E1E3E6" >新增票档</el-button>
      </el-col>
    </el-row>
    <el-row :span="24">
      <el-col :span="16" :offset="5" style="padding-top:12px;">
      <el-form-item label="售卖开始 :">
        <el-row :gutter="24">
          <el-col :span="2">
          <span  style="display:inline-block;margin-right:0px;vertical-align:top;width:110px">场次</span>
          </el-col>
          <div style="display:inline-block;vertical-align:top;width:calc(100% - 110px);float:right;margin-right: 0px">
          <el-col :span="7">
            <el-select v-model="addSalesPlan.startType"  style="width:100%" placeholder="请选择开始状态">
              <el-option
                v-for="sellEnd in sellEndOption"
                :key="sellEnd.code"
                :label="sellEnd.name"
                :value="sellEnd.code"
              >
                {{ sellEnd.name }}
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="8">
                <el-input v-model="addSalesPlan.sellTime" type="number" placeholder="请输入开始时间"></el-input>
          </el-col>
          <el-col :span="7">
              <el-select v-model="addSalesPlan.sellDateUnit"  style="width:100%" placeholder="请选择时间单位">
                <el-option
                  v-for="sellUnit in sellDateUnitOption"
                  :key="sellUnit.code"
                  :label="sellUnit.name"
                  :value="sellUnit.code"
                >
                  {{ sellUnit.name }}
                </el-option>
              </el-select>
          </el-col>
          </div>
        </el-row>
      </el-form-item>
    </el-col>
    </el-row>

    <el-row :gutter="24">
      <el-col :span="16" :offset="5">
        <h4>关联票档</h4>
        <hr>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="16" :offset="5">
        <el-form-item label="选座 :" prop="selectSeat">
          <el-switch
            v-model="addSalesPlan.selectSeat"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-value="100"
            inactive-value="0"
          >
          </el-switch>
        </el-form-item>
      </el-col>
    </el-row>
    <div v-if="addSalesPlan.selectSeat == 100">
      <el-row :gutter="24">
        <el-col :span="16" :offset="5">
          <el-form-item  label="演出场地:" prop="studioId">
            <el-select v-model="addSalesPlan.studioId" filterable placeholder="请选择演出场地" style="width:100%" @change='changeYard'>
              <el-option
                v-for="yard in yardOptions"
                :key="yard.id"
                :label="yard.name"
                :value="yard.id"
              >{{yard.name}}
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="15" :offset="5">
          <el-form-item>
            <img src="./img/ym.png" style="width:100%;height:50px;" class="image">
          </el-form-item>
        </el-col>
        <el-col :span="4" style="padding:0;">
            <!-- stallItems 
            [{'name':'','takeColor':'#FF2200','color':'#FF2200','stallPrice':''}], -->
            <div v-for="(item) in addSalesPlan.stallItems" :key="item.name" style="display:flex;align-items: flex-start;margin-bottom:5px;" @click="vipClick(item)" >
              <div>
                <el-button :style="{background:item.takeColor, color:'#fff',padding:'9px'}" icon="el-icon-circle-plus-outline" size="small">
                </el-button>
              </div>
              <div style="padding-left:4px;font-size:14px;">
                <p style="margin:0;font-weight:500;padding-left:4px;">{{item.name}}</p>
                <span>￥{{item.stallPrice?item.stallPrice:'0.00'}}</span>
                
              </div>
            </div>
            <!-- <el-button style="margin-top: 5px">普通票</el-button> -->
        </el-col>
      </el-row>
      <el-row :gutter="24" class="seat-main-container">
        <el-col :span="16" :offset="8">
          <!-- 座位图 -->
          <div class="seat-main-content" @mousedown.prevent="mousedown" @mouseup.prevent="mouseup" @mousemove.prevent="mousemove" ref="seatDraw" id="seatDraw">
            <ul class="seat-list-content"  v-for="(itemList,index) in seatArray" :key="index" :style="{ width: oWith+'px' }">
              <li class="seat-list-item" v-for="(item) in itemList.child" :key="item.column" @click="chooseSeat(itemList,item)" :style="{color:item.color}">
                    <div :style="[item.status == 0 ? noShow:isShow]" style="font-size:18px;">
                      <svg-icon icon-class="seatImg" v-show="item.status == 1"></svg-icon>
                      <svg-icon icon-class="seatImg1" v-show="item.status == 3" ></svg-icon>
                        <!-- <img src="../seats/img/seatImg.svg" style="width:20px;height:20px;" class="image" v-show="item.status == 1">
                        <img src="../seats/img/seatImg1.svg" style="width:20px;height:20px;" class="image" v-show="item.status == 3"> -->
                    </div>
              </li>
            </ul>
            <div ref="moveSelected" class="drag-box"></div>
          </div>
        </el-col>
      </el-row>
    </div>

    <el-footer height="80px">
      <el-row style="display: flex;justify-content: center;align-items: center;">
        <el-button @click="submit" type="primary">
          保存
        </el-button>
        <el-button @click="editOut">
          取消
        </el-button>
      </el-row>
    </el-footer>
<!--      <el-col :span="24">-->
<!--        <el-form-item label="票面名称 :" prop="salName">-->
<!--          <el-input v-model="addSalesPlan.salName" placeholder="请输入票面名称" />-->
<!--        </el-form-item>-->
<!--      </el-col>-->
<!--      <el-col :span="24">-->
<!--        <el-form-item label="售票计划代码 :" prop="code">-->
<!--          <el-input v-model="addSalesPlan.code" placeholder="请输入售票计划代码" />-->
<!--        </el-form-item>-->
<!--      </el-col>-->
<!--      <el-col :span="24">-->
<!--        <el-form-item label="售票信息 :" prop="info">-->
<!--          <el-input v-model="addSalesPlan.info" placeholder="请输入售票信息" />-->
<!--        </el-form-item>-->
<!--      </el-col>-->
<!--      <el-col :span="24">-->
<!--        <el-form-item label="票面计费类型 :" prop="salTp">-->
<!--          <el-select v-model="addSalesPlan.salTp" filterable placeholder="请选择票面计费类型" style="width: 100%;">-->
<!--            <el-option-->
<!--              v-for="item in tckSaltpOptions"-->
<!--              :key="item.code"-->
<!--              :label="item.name"-->
<!--              :value="item.name"-->
<!--            >-->
<!--              {{ item.name }}-->
<!--            </el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->
<!--      </el-col>-->
<!--      <el-col :span="24">-->
<!--        <el-form-item label="预订天数(天) :" prop="reseDays">-->
<!--          <el-input v-model="addSalesPlan.reseDays" placeholder="请输入预订天数" />-->
<!--        </el-form-item>-->
<!--      </el-col>-->
<!--      <el-col :span="24">-->
<!--        <el-form-item label="发售时间 : " prop="startTime">-->
<!--          <el-date-picker-->
<!--            v-model="addSalesPlan.startTime"-->
<!--            type="date"-->
<!--            placeholder="请选择发售时间"-->
<!--            value-format=" yyyy-MM-dd"-->
<!--            style="width:100%"-->
<!--          />-->
<!--        </el-form-item>-->
<!--      </el-col>-->
<!--      <el-col :span="24">-->
<!--        <el-form-item label="结束时间 :" prop="endTime">-->
<!--          <el-date-picker-->
<!--            v-model="addSalesPlan.endTime"-->
<!--            type="date"-->
<!--            placeholder="请选择结束时间"-->
<!--            value-format=" yyyy-MM-dd"-->
<!--            style="width:100%"-->
<!--          />-->
<!--        </el-form-item>-->
<!--      </el-col>-->
<!--      <el-col :span="24">-->
<!--        <el-form-item label="团队限定人数 ： " prop="definePeoples">-->
<!--          <el-input v-model="addSalesPlan.definePeoples" placeholder="请输入限定人数" />-->
<!--        </el-form-item>-->
<!--      </el-col>-->
<!--      <el-col :span="24">-->
<!--        <el-form-item label="日发售数量(张) :" prop="dayNum">-->
<!--          <el-input v-model="addSalesPlan.dayNum" placeholder="请输入日发售数量" />-->
<!--        </el-form-item>-->
<!--      </el-col>-->
<!--      <el-col :span="24">-->
<!--        <el-form-item label="售票价格(元) :" prop="price">-->
<!--          <el-input v-model="addSalesPlan.price" placeholder="请输入售票价格" />-->
<!--        </el-form-item>-->
<!--      </el-col>-->
  </el-form>
</template>

<script>
import { replaceSpacesObj } from '../../../utils/webUtils.js'
import addSalanImg from './addSalanImg.vue'
import {} from '../../../styles/addTict.scss'
import {getDataForSP, writePageInfo} from "../../../utils/webUtils";

export default {
  name: 'AddSalesPlan',
  components: { addSalanImg },
  data() {

    return {
      pickerOptions: {
        disabledDate: (time) => {
          // 如果函数处理比较简单,可以直接在这里写逻辑方法
          // return time.getTime() < Date.now() - 8.64e7

          // 如果函数里处理的数据比较麻烦,也可以单独放在一个函数里,避免data数据太臃肿
          return this.dealDisabledDate(time)
        },
      },
      pickerStartOptions:{
        disabledDate:(time) => {
          return this.detailStartDate(time)
        },
      },
      pickerEndOptions:{
        disabledDate:(time) =>{
          return this.detailEndDate(time)
        },
      },
      recordStartTime:'',
      imgData:'1',
      addSalesPlan: {
        code: '',
        tictCode: '',
        info: '',
        salTp: '',
        salName: '',
        merchUuid: '',
        merchName: '',
        yardName: '',
        yardCode: '',
        reseDays: '',
        allShowTime:[],
        startShowTime:'',
        endShowTime:'',
        startTime: '',
        endTime: '',
        dayNum: '',
        price: '',
        boradsTimes: '',
        teamCumstoer: '',
        definePeoples: '',
        sellTime:'',
        startType:'',
        sellStart:'',
        teamDefine:'',
        sellDateUnit:'',
        broadcastList: [{'name':'','startTime':'','endTime':''}],
        stallItems: [{name:'VIP',takeColor:'#FF2200',color:'#FF2200',stallPrice:'2019.00'}],
        selectSeat:'',
        studioId:'',
        studioName:'',
        seat:''
      },
      validOptions: {},
      tckSaltpOptions: [],
      merchants: { name: '', uuid: '' },
      rules: {
        tictName: [
          { required: true, message: '票面名称不能为空', trigger: 'blur' }
        ],
        allShowTime: [
          { required: true, message: '播出日期不能为空', trigger: 'blur' }
        ],
        broadcastList: [
          { required: true, message: '播出场次不能为空', trigger: 'blur' }
        ],
      },
      sellEndOption:[],
      sellDateUnitOption:[],
      info: '',
      infoShow: false,
      tictData: [],
      files: [],
      onloadImg: { filename: '', url: '', uid: '' },
      imgOnloadUrl: '',
      dialogImageUrl: '',
      dialogVisible: false,
      editBoxShow: false,
      addShow: false,
      uuid: '',
      formData: '',
      teamCumstoerOption: [],
      define: '',
      imgformData: {}, // 图片对象
      addTictData: {
        imgStr: ''
      },
      yardOptions:[],
      flag: false,
      oWith:900,
      x: 0,
      y: 0,
      seatArray:[],
      isShow:{
        opacity:1
      },
      noShow:{
        opacity:0
      }
    }
  },
  mounted() {
    this.queryTckSaltp()
    this.queryTict()
    this.queryTeamCus()
    this.querySell()
    this.queryUnit()
    this.queryYard()
  },
  methods: {
    dealDisabledDate (time) {
      return time.getTime() <= Date.now()- 8.64e7

      // 这里减8.64e7的作用是,让今天的日期可以选择,如果不减的话,今天的日期就不可以选择,判断中写<= 也是没用的,一天的毫秒数就是8.64e7
      // return time.getTime() <= Date.now()
      // return time.getTime() < Date.now() - 8.64e7
    },
    detailStartDate(time){
      if(time.getTime()<this.addSalesPlan.allShowTime[0]||time.getTime()>this.addSalesPlan.allShowTime[1]){
        return  true
      }
    },
    detailEndDate(time){
      if(time.getTime()<this.addSalesPlan.allShowTime[0]||time.getTime()>this.addSalesPlan.allShowTime[1]||this.recordStartTime>time.getTime()){
        return  true
      }
    },
    recordStartTimeValue(val){
      this.recordStartTime=val
    },
    vipClick(e){
      // console.log(e)
      // let seatArray = this.seatArray;
      // seatArray.map(itemList =>{
      //   itemList.child.map(item =>{
      //     if(item.status == 3 ){
      //       item.color = e.takeColor;
      //       item.classId = 1;
      //       item.className = e.name;
      //       item.stallPrice = e.stallPrice; 
      //     }
      //   })
      // })
      let that = this;
      // console.log(seatArray)
      let array = this.seatArray;
      array.map(ulItem =>{
          ulItem.child.map(item =>{
            if(item.status == 3){
              item.status = 1;
              item.color = e.takeColor;
              item.classId = 1;
              item.className = e.name;
              item.stallPrice = e.stallPrice; 
            }
          })
        })
        this.$nextTick(() => {that.seatArray = array;})
      
    },
    // 演出场地查询
    queryYard() {
      this.axios
        .request({
          method: 'get',
          url: './tck/seat/optionalStudio',
          params: {}
        })
        .then(response => {
          this.yardOptions = response.data.data
        })
        .catch(error => {
          console.log(error)
        })
    },
    changeYard() {
      this.yardOptions.forEach(list => {
        if (list.name === this.addSalesPlan.studioName) {
          this.addSalesPlan.studioName = list.name
          this.addSalesPlan.studioId = list.id
        }
      })
      this.querySeat()
    },
  //播出场次与播出日期的时间校验
   queryDate(){
     var broadSort=[]
     for(var n=0;n<this.addSalesPlan.broadcastList.length;n++){
       broadSort.push(this.addSalesPlan.broadcastList[n].startTime)
     }
   broadSort=broadSort.sort()
    for(var index=0;this.addSalesPlan.broadcastList.length>index;index++) {
       if(this.addSalesPlan.allShowTime[0]>this.addSalesPlan.broadcastList[index].startTime||this.addSalesPlan.allShowTime[1]<this.addSalesPlan.broadcastList[index].startTime||
       this.addSalesPlan.allShowTime[0]>this.addSalesPlan.broadcastList[index].endTime||this.addSalesPlan.allShowTime[1]<this.addSalesPlan.broadcastList[index].endTimes) {
         alert("播出场次时间不在播出日期范围内")
         return false
       }
    }
     if(broadSort.length>=2){
     for(var broadSortIndex=1;broadSort.length>broadSortIndex;broadSortIndex++){
         if(broadSort[broadSortIndex]<this.addSalesPlan.broadcastList[broadSortIndex-1].endTime){
           alert("播出场次时间重复")
           return false

       }
     }
     }
    return false
   },
    querySeat() {
      // 演出场地名称
      let that = this;
      this.axios.request({
        method: 'get',
        url: './tck/seat/listSeat',
        params: {yardId: this.addSalesPlan.studioId}
      }).then(response => {
        // this.seatArray = JSON.parse(response.data.data[0].seat);
        let listArray = JSON.parse(response.data.data[0].seat);
        listArray.map(item =>{
          item.color = '#ccc';
          item.classId = 0;
          item.className = '';
          item.stallPrice = ''; 
        })
        that.seatArray = listArray;
      }).catch(error => {
        console.log(error)
      })
        .catch(error => {
          console.log(error)
        })
    },
    openDiscount() {
      this.define = true
      this.addSalesPlan.teamDefine='10'
    },
    imgState(msg) {
      this.editBoxShow = msg
      this.editShow = msg
      this.addShow = msg
      this.userEdit = msg
      this.queryTict()
    },
    addStallItems() {
      var params = {}
      params.name = ''
      params.takeColor = ''
      params.stallPrice=''
      this.addSalesPlan.stallItems.push(params)
    },
    delStallItems(index) {
      this.addSalesPlan.stallItems.splice(index, 1)
    },
    addItem() {
      var params = {}
      params.name = ''
      params.startTime = ''
      params.endTime=''
      this.addSalesPlan.broadcastList.push(params)
    },
    del(index) {
      debugger
      this.addSalesPlan.broadcastList.splice(index, 1)
    },
    // 查询商户下所有票务信息
    queryTict() {
      this.axios
        .request({
          method: 'get',
          url: './ope/kdi/merch/search/findByUser',
          params: {}
        })
        .then(response => {
          // this.merchants = response.data[0]
          this.axios.request({
            method: 'get',
            url: './tck/kdi/tict/search/findByMerch',
             params: { merchUuid: this.merchants.uuid }
          }).then(response => {
            this.tictData = response.data.data
          }).catch(error => {
            console.log(error)
          })
        })
        .catch(error => {
          console.log(error)
        })
    },
    // 根据代码获取售票类型
    queryTckSaltp() {
      this.axios
        .request({
          method: 'get',
          url: './kwp/kdi/para/code/TCK_SALTP',
          params: {}
        })
        .then(response => {
          this.tckSaltpOptions = response.data.subParas
        })
        .catch(error => {
          console.log(error)
        })
    },
    //根据代码获取单位
    queryUnit(){
      this.axios
        .request({
          method: 'get',
          url: './kwp/kdi/para/code/SALE_UNIT',
          params: {}
        })
        .then(response => {
          this.sellDateUnitOption = response.data.subParas
        })
        .catch(error => {
          console.log(error)
        })
    },
    //根据代码获取售卖场次
    querySell(){
      this.axios
        .request({
          method: 'get',
          url: './kwp/kdi/para/code/SALE_SELL',
          params: {}
        })
        .then(response => {
          this.sellEndOption = response.data.subParas
        })
        .catch(error => {
          console.log(error)
        })
    },
    // 根据代码获取团队折扣
    queryTeamCus() {
      this.axios
        .request({
          method: 'get',
          url: './kwp/kdi/para/code/TEAM_CUS',
          params: {}
        })
        .then(response => {
          this.teamCumstoerOption = response.data.subParas
        })
        .catch(error => {
          console.log(error)
        })
    },
    getTictValue() {
      this.tictData.forEach(list => {
        if (list.name === this.addSalesPlan.tictName) {
          this.addSalesPlan.tictCode = list.uuid
        }
      })
    },
    closDisplay(){
      this.$emit("close");
    },
    dataSucess(message) {
      this.$notify({
        title: '成功',
        message: message,
        type: 'success'
      });
    },
    dataFail(message) {
      this.$notify({
        title: '失败',
        message: message,
        type: 'error'
      });
    },
    submit() {
      if(this.addSalesPlan.allShowTime.length>=2){
        this.addSalesPlan.startShowTime=this.addSalesPlan.allShowTime[0]
        this.addSalesPlan.endShowTime=this.addSalesPlan.allShowTime[1]
      }
      var dateType=this.queryDate()
      this.$refs['addSalesPlan'].validate((valid) => {
        if (!valid&&dateType) {
          return
        }
        this.addSalesPlan = replaceSpacesObj(this.addSalesPlan)
        this.axios.request({
          method: 'post',
          url: './tck/plan/ticketing-plan/save',
          headers: {
            'Content-Type': 'application/json;charset=UTF-8'
          },
          data: {
            code: this.addSalesPlan.code,
            tictCode: this.addSalesPlan.tictCode,
            info: this.addSalesPlan.info,
            salTp: this.addSalesPlan.salTp,
            salName: this.addSalesPlan.salName,
            merchUuid: this.addSalesPlan.merchUuid,
            merchName: this.addSalesPlan.merchName,
            yardName: this.addSalesPlan.yardName,
            yardCode: this.addSalesPlan.yardCode,
            reseDays: this.addSalesPlan.reseDays,
            startTime: this.addSalesPlan.startTime,
            endTime: this.addSalesPlan.endTime,
            dayNum: this.addSalesPlan.dayNum,
            price: this.addSalesPlan.price,
            teamCumstoer:this.addSalesPlan.teamCumstoer,
            teamDefine:this.addSalesPlan.teamDefine,
            broadcastList:JSON.stringify(this.addSalesPlan.broadcastList),
            stallItems:JSON.stringify(this.addSalesPlan.stallItems),
            startShowTime:this.addSalesPlan.startShowTime,
            endShowTime:this.addSalesPlan.endShowTime,
            sellStart:this.addSalesPlan.sellStart,
            startType:this.addSalesPlan.startType,
            sellTime:this.addSalesPlan.sellTime,
            sellDateUnit:this.addSalesPlan.sellDateUnit,
            surplusStock: '0',
            stock: '0'
          }
        }).then((response) => {
          this.uuid = response.data.uuid
          this.dataSucess("新增发售计划成功")
          this.editOut();
          this.editBoxShow = true
          this.addShow = true
          // this.$emit("editState", false);
        }).catch(error => {
          console.log(error)
          this.dataFail("新增发售计划失败")
          this.info = '发售计划新增失败'
          this.infoShow = true
        })
      })
    },
    endProcessing() {
      this.info = this.info + '新增成功,两秒后关闭'
      this.infoShow = true
      setTimeout(() => {
        this.infoShow = false
        this.$emit('editState', false)
        this.cleanHrom()
        this.info = ''
      }, 2000)
    },
    cleanHrom() {
      this.addSalesPlan = {
        code: '',
        tictName: '',
        tictCode: '',
        info: '',
        salTp: '',
        salName: '',
        merchUuid: '',
        merchName: '',
        yardName: '',
        yardCode: '',
        reseDays: '',
        // startTime: '',
        // endTime: '',
        dayNum: '',
        price: ''
      }
    },
    editOut() {
   this.$router.push("/salesPlan")
    },
    mousedown(e){
      // if(this.SeatRadio != '1') return;
      this.flag = true;
      if(e.target.offsetWidth < this.oWith){
        this.x = e.layerX; // 鼠标落下时的X
        this.y = e.layerY; // 鼠标落下时的Y
        // this.$refs.moveSelected.style.top = e.target.layerY + 'px';
        // this.$refs.moveSelected.style.left = e.target.layerX + 'px';
        this.$refs.moveSelected.style.top = e.layerY + 'px';
        this.$refs.moveSelected.style.left = e.layerX + 'px';
      }
    },
    mouseup(e){
      // if(this.SeatRadio != '1') return;
      this.flag = false;
      let endX = e.layerX;
      let endY = e.layerY;
      let startX = this.x;
      let StartY = this.y;
      let minX = startX > endX ? endX : startX;
      let maxX = startX > endX ? startX : endX;
      let minY = StartY > endY ? endY : StartY;
      let maxY = StartY > endY ? StartY : endY;
      let array = this.seatArray;
      if(e.target.offsetWidth < this.oWith){
        let oW = this.$refs.moveSelected.style.width;
        let oH = this.$refs.moveSelected.style.height;
        array.map(ulItem =>{
          ulItem.child.map(item =>{
            let column = item.column * 24;
            let column2 = (item.column-1) * 24;
            let rowTop = item.row * 24;
            let rowBottom = (item.row - 1)*24;
            // if(column > (minX-20) && rowTop > minY && column2 < (maxX-20) && rowBottom < maxY){
            //   if(item.status == 1){
            //     item.status = 3;
            //   }
            // }
            
            if(column2 > (minX-20) && column <= (maxX + 20)  && rowBottom >= (minY-10)  && rowTop < (maxY+10)){
                if(item.status == 1){
                item.status = 3;
              }
            }
          })
        })
      }
      this.$refs.moveSelected.style.width = 0;
      this.$refs.moveSelected.style.height = 0;
      // let number=0
      // this.seatArray.map(itemList =>{
      //   itemList.child.map(item =>{
      //     if(item.status == 1){
      //       number++;
      //     }
      //   })
      // })
      // this.SeatNumber = number
      // console.log(allLis)
      // console.log(e)
    },
    mousemove(e){
      // console.log(e)
      // console.log(e.toElement)
      // if(this.SeatRadio != '1') return;
      if(this.flag){
        this.drawRect(e);
      }
      
    },
    drawRect(e){
      let startX = this.x;
      let StartY = this.y;
      let endX = e.layerX;
      let endY = e.layerY;
      if(this.flag){
        if(startX < endX && StartY < endY){
          this.$refs.moveSelected.style.top = StartY +'px';
          this.$refs.moveSelected.style.left = startX +'px';
          this.$refs.moveSelected.style.width = endX - startX + 4 + 'px';
          this.$refs.moveSelected.style.height = endY - StartY + 2 + 'px';
        }
        else if(startX > endX && StartY < endY){
          this.$refs.moveSelected.style.left = endX +'px';
          this.$refs.moveSelected.style.width = startX - endX + 4 + 'px';
          this.$refs.moveSelected.style.height = endY - StartY + 2 + 'px';
        }else if(startX < endX && StartY > endY){
          this.$refs.moveSelected.style.top = endY +'px';
          this.$refs.moveSelected.style.width = endX - startX + 4 + 'px';
          this.$refs.moveSelected.style.height = StartY - endY + 2 + 'px';
        }else if(startX > endX && StartY > endY){
          this.$refs.moveSelected.style.top = endY +'px';
          this.$refs.moveSelected.style.left = endX +'px';
          this.$refs.moveSelected.style.width = startX - endX + 4 + 'px';
          this.$refs.moveSelected.style.height = StartY - endY + 2 + 'px';
        }else{
          this.$refs.moveSelected.style.width = endX - startX + 4 + 'px';
          this.$refs.moveSelected.style.height = endY - StartY + 2 + 'px';
        }
      }
    },
    // 改变座位图状态
    chooseSeat(row,column) {
      let arrays = this.seatArray;
      arrays.map(itemList =>{
        itemList.child.map(item =>{
          if(item.row == column.row && item.column == column.column){
              item.status = item.status == 1 ? 3 : 1;
          }
        })
      })
    }
  }
}
</script>

<style lang="scss" rel="stylesheet/scss">

.sale-main{
  .el-card__header{
    padding: 8px 20px;
    background-color: #eff4f9;
  }
  .custom-class{
    color: red;
  }
  .edit {
    width: 100%;
    height: 100%;
    z-index: 100;
  }
}
  
  .seat-main-container{
    .seat-main-content{
      position: relative;
      border-bottom: none;
      // padding: 0 20px 20px;
    }
    .seat-list-content{
      width: 100%;
      height:4px
      /*border-left:1px solid #afa9a9;*/
      /*first-of-type>li{*/
      /*   border-top: 1px solid #afa9a9;*/
      /* }*/
    }
    .seat-list-item{
      width: 24px;
      height: 24px;
      display:inline-block;
      text-align: center;
      line-height: 24px;
      color: #afa9a9;
      font-size: 16px;
      /*border-right: 1px solid #afa9a9;;*/
      /*border-bottom: 1px solid #afa9a9;;*/
      margin-right: -1px;
      margin-bottom: -1px;
      cursor: pointer;
      /*hover{*/
      /*   color:deepskyblue;*/
      /* }*/
    }
    .drag-box{
      position: absolute;
      background-color: rgba(0,0,0,.5);
      border: 1px dashed #fff;
      width: 0;
      height: 0;
      z-index: 999;
    }
  }
  
  

</style>
